<template>
	<div>
		
		<div class="header—tit clearfix"><span @click="goback">退出</span><span>你好！{{name}}</span></div>
		<ul class="headerul clearfix">
			<li v-for="(item,index) in list">
				<router-link :to="{path: item.link,query:{item:item.id}}" :id="item.id" :class="{'redcloer':cun == index}" @click.native="addclass(index)"><img :src="item.src"/><p>{{item.name}}</p></router-link>
				<!--<a href="javascript:;" target="_blank" :id="item.id" :class="{redcloer: cun == index}" @click="addclass(index)">{{item.name}}</a>-->
			</li>

		</ul>
	</div>
</template>

<script>
export default {
  name: "headers",
  data() {
    return {
      cun: 0,
      name: JSON.parse(localStorage.user).name,
      list: [
        {
          name: "药品录入",
          id: "0",
          link: "index",
          src: require("../assets/nav3.png")
        },
        {
          name: "药房管理",
          id: "1",
          link: "drugs",
          src: require("../assets/nav2.png")
        },
        {
          name: "接诊",
          id: "2",
          link: "statistics",
          src: require("../assets/nav1.png")
        },
        {
          name: "设置",
          id: "3",
          link: "set",
          src: require("../assets/nav4.png")
        }
      ]
    };
  },
  mounted() {
    if (this.$route.query.item) {
      this.cun = this.$route.query.item;
    } else {
      this.cun = 0;
    }
  },
  methods: {
    addclass(index) {
      if (index == 0) {
        this.$router.push({ path: "/index/jiezhen" }); //登录成功跳转页面
      }
      this.cun = index;
    },
    goback() {
      var _this = this;
      // alert(0)
      this.$http
        .post(
          "http://medical.qingguo188.com/user/logout",
          {
            id: JSON.parse(localStorage.user).userid,
            level: JSON.parse(localStorage.user).level
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(
          rester => {
            if (rester.data.status == 1) {
              _this.$layer.msg(rester.data.$message, { time: 1 });
          _this.$router.push({ path: "/" }); //退出成功
          localStorage.user = ""; //退出成功 清除localstorage
            } else {
               _this.$layer.msg("退出失败", { time: 1 });
            }
          }

         
        );
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header—tit {
  border-bottom: 1px solid #dedede;
  padding: 0 30px;
  margin-bottom: 10px;
  height: 30px;
  line-height: 30px;
}
.header—tit span {
  float: right;
  color: orangered;
  font-size: 15px;
  margin: 0 20px;
}
.headerul {
  margin: 0 auto;
  padding: 0 20px;
}
.headerul img {
  width: 40px;
  height: 40px;
}
.headerul p {
  margin-top: 5px;
}

.headerul li {
  float: left;
  width: 70px;
  margin: 0 20px;
}
.headerul li a {
  display: block;
  text-align: center;
  padding: 3px 0;
}
.headerul li a:hover {
  color: #ffffff;
  background: #2851a9;
}

.redcloer {
  color: #ffffff;
  background: #2851a9;
}
</style>